<template>
  <div class="background">
    <el-breadcrumb
      separator-class="el-icon-arrow-right"
      style="line-height: 16px; font-size: 16px; padding: 12px 0"
    >
      <el-breadcrumb-item :to="{ path: '/Home/Index' }" style=""
        ><img
          style="width: 20px; height: 20px; margin-top: -4px"
          src="../../assets/images/homepage_24.png"
      /></el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/Home/Index' }"
        >论坛</el-breadcrumb-item
      >
      <el-breadcrumb-item>版块</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row class="pad">
      <el-col :span="4" :offset="4">
        <el-card
          :body-style="{ padding: '0px' }"
          align="middle"
          shandow="hover"
          @click.native="golist(0)"
        >
          <img src="../../assets/images/life.jpg" class="image" />
          <div style="padding: 14px">
            <span>日常</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" :offset="4">
        <el-card
          :body-style="{ padding: '0px' }"
          align="middle"
          shandow="hover"
          @click.native="golist(1)"
        >
          <img src="../../assets/images/know.jpg" class="image" />
          <div style="padding: 14px">
            <span>知识</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="4">
        <el-card
          :body-style="{ padding: '0px' }"
          align="middle"
          @click.native="golist(2)"
        >
          <img src="../../assets/images/question.jpg" class="image" />
          <div style="padding: 14px">
            <span>提问</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" :offset="4">
        <el-card
          :body-style="{ padding: '0px' }"
          align="middle"
          @click.native="golist(3)"
        >
          <img src="../../assets/images/help.jpg" class="image" />
          <div style="padding: 14px">
            <span>求助</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="4" :offset="4">
        <el-card
          :body-style="{ padding: '0px' }"
          align="middle"
          @click.native="golist(4)"
        >
          <img src="../../assets/images/friend.jpg" class="image" />
          <div style="padding: 14px">
            <span>交友</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    golist(type) {
      console.log(type);
      this.$router.push({
        path: "/Home/Specific",
        query: { type: type },
      });
    },
  },
};
</script>


<style scope>
.el-row {
  background-color: #fff;
}
.pad {
  padding-top: 10px;
}
.background {
  width: 1004px;
  background-color: #f5f5f5;
  margin: 0 auto;
  min-height: 700px;
}
.el-card span {
  color: #6699cc;
  font-weight: bolder;
}
.el-card {
  transition: All 0.3s ease-in-out;
  -webkit-transition: All 0.3s ease-in-out;
  -moz-transition: All 0.3s ease-in-out;
  -o-transition: All 0.3s ease-in-out;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.12) !important;
}

.el-card:hover {
  cursor: pointer;
  transform: scale(1.05);
  -webkit-transform: scale(1.05);
  -moz-transform: scale(1.05);
  -o-transform: scale(1.05);
  -ms-transform: scale(1.05);
}
.el-card {
  width: 300px;
  height: 230px;
  margin-top: 10px;
  margin-bottom: 10px;
  transition: all 0.5s;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 300px;
  height: 150px;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>